<script setup lang="ts">
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import {reactive, ref} from "vue";
import SubhutiLexer from "subhuti/src/parser/SubhutiLexer.ts";
import {es6Tokens} from "subhuti-ts/src/language/es2015/Es6Tokens.ts";
import OvsParser from "./ovs/parser/OvsParser.ts";

function traverseClearTokens(currentNode: SubhutiCst) {
  if (!currentNode || !currentNode.children || !currentNode.children.length)
    return
  // 将当前节点添加到 Map 中
  // 递归遍历子节点
  if (currentNode.children && currentNode.children.length > 0) {
    currentNode.children.forEach(child => traverseClearTokens(child))
  }
  currentNode.tokens = undefined
  return currentNode
}

import SubhutiCst from "subhuti/src/struct/SubhutiCst.ts";
import {ovsToAstUtil} from "./ovs/factory/OvsToAstUtil.ts";
import JsonUtil from "subhuti/src/utils/JsonUtil.ts";

const code = `
div{
  123
}
`

const codeInput = ref(code)
const cst: { cst?: SubhutiCst } = {}
const cstWarp = reactive(cst)
const lexer = new SubhutiLexer(es6Tokens)
const tokens = lexer.lexer(code)
const parser = new OvsParser(tokens)
cstWarp.cst = parser.Program()
traverseClearTokens(cstWarp.cst)
const ast = ovsToAstUtil.createProgramAst(cstWarp.cst)
JsonUtil.log(ast)
console.log(cstWarp.cst)



</script>

<template>
  <div class="size100vwh flex-row overflow-hidden">
    <div class="w50p overflow-hidden">
      <div class="h50p pr overflow-hidden">
        <textarea class="h100p w100p" v-model="codeInput"></textarea>
      </div>
      <div class="h50p bg-red_echart flex-col overflow-auto">
        <vue-json-pretty show-icon :data="[ast]"/>
      </div>
    </div>
    <div class="w50p">
      <div class="h50p">{{ codeInput }}</div>
      <div class="h50p bg-greenDeep_echart"></div>
    </div>
  </div>
</template>
